<template>
    <div id="Financial_Top">
        <div>
            <div>
                <!--        面包屑-->
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>提现记录</el-breadcrumb-item>
                </el-breadcrumb>
                <!--        面包屑 end-->
                <!--        内容-->
                <el-card>
                    <el-table
                            :data="tableData"
                            border
                            style="width: 100%">
                        <el-table-column
                                type="index"
                                label="#">
                        </el-table-column>
                        <el-table-column
                                prop="created_at"
                                label="日期">
                        </el-table-column>
                        <el-table-column
                                prop="trade_no"
                                label="订单号">
                        </el-table-column>
                        <el-table-column
                                prop="money"
                                label="提现金额">
                        </el-table-column>
                        <el-table-column
                                prop="coin"
                                label="所需金币">
                        </el-table-column>
                        <el-table-column
                                label="提现方式">
                            <template slot-scope="scope">
                                <span v-if="scope.row.type==1">微信</span>
                                <span v-if="scope.row.type==2">支付宝</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                width="120"
                                label="提现状态">
                            <template slot-scope="scope">
                                <span v-if="scope.row.status==1">已提现</span>
                                <span type="warning" v-if="scope.row.status==0">提现中</span>
                                <span type="danger" v-if="scope.row.status==2">已拒绝提现</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="el-pagination">
                        <el-pagination
                                background
                                @size-change="changeSize"
                                @current-change="changeCurrent"
                                :current-page="params.pagenum"
                                :page-sizes="[10, 20, 30, 40]"
                                :page-size="params.pagesize"
                                :layout="this.$store.state.paginationLayout"
                                :total="params.totals">
                        </el-pagination>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: "Financial_Top",
    data() {
      return {
        params: {
          pagenum: 1,
          pagesize: 10,
          totals: 0,
        },
        tableData: [],
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        let data = {
          page: this.params.pagenum,
          page_size: this.params.pagesize,
        };
        this.$axios.post("writer/withdraw/index", data).then((res) => {
          this.params.totals = res.data.count;
          this.tableData = res.data.list;
        });
      },
      // 每页显示多少条
      changeSize(val) {
        this.params.pagesize = val;
        this.getList();
      },
      // 当前显示的页数
      changeCurrent(val) {
        this.params.pagenum = val;
        this.getList()
      },
      search() {
        this.params.pagenum = 1;
        this.getList();
      },
    }
  }
</script>

<style scoped>

</style>